import React from 'react'
import './index.scss'

export default (props) => {
	let { progress = 0 } = props
	// 控制进度样式
	let process = progress / 100
	if (process > 1) {
		process = 1
	}
	if (process < 0) {
		process = 0
	}
	// 判断百分比值，如果小于0则默认为0
	let resultValue = '0'
	if (
		'number' === typeof progress ||
		('string' === typeof progress && /(^-?[0-9][0-9]*(.[0-9]+)?)$/.test(progress))
	) {
		progress = parseFloat(progress)
		if (progress > 999) {
			resultValue = '>999'
		} else if (progress < 0) {
		} else {
			resultValue = progress
		}
	}
	return (
		<div className="progress-mode">
			<div className="progress-clear"></div>
			{/* <div className="circle-shadow"></div> */}
			<div className="progress-start-icon" />
			<div className="rotate-point">
				<div
					className="rotate-icon"
					style={{
						transform: `rotate(${180 * process}deg)`,
					}}
				/>
				<div
					className="progress-text"
					style={{
						fontSize: progress >= 100 ? '14px' : '17px',
					}}>
					{`${resultValue}%`}
				</div>
			</div>
			<div className="mask" />

			{progress > 100 ? (
				<div className="progress-max-icon" />
			) : (
				<div
					className="progress-point-icon"
					style={{
						transform: `rotate(${180 * process}deg)`,
					}}
				/>
			)}
			<div className="progress-content">
				<div
					className="progress-red-border"
					style={{
						// -180-0 即圆弧从0-180度
						transform: `rotate(-${180 * (1 - process)}deg)`,
					}}
				/>
				<div
					className="progress-yellow-border"
					style={{
						// 0-180 即圆弧从180-0度
						transform: `rotate(${180 * process}deg)`,
					}}
				/>
				<div className="progress-mask">
					<div
						className="progress-red"
						style={{
							// -180-0 即圆弧从0-180度
							transform: `rotate(-${180 * (1 - process)}deg)`,
						}}
					/>
					<div
						className="progress-yellow"
						style={{
							// 0-180 即圆弧从180-0度
							transform: `rotate(${180 * process}deg)`,
						}}
					/>
				</div>
			</div>
			{progress > 100 ? (
				<div className="progress-end-max-icon" />
			) : (
				<div className="progress-end-min-icon" />
			)}
			{progress === 0 ? (
				<div className="split-area">
					<div className="bottom-left-yellow-slit common-slit" />
					<div className="bottom-right-yellow-slit common-slit" />
					<div className="white-mask"></div>
				</div>
			) : null}
			{progress >= 100 ? (
				<div className="split-area">
					<div className="bottom-left-red-slit common-slit" />
					<div className="bottom-right-red-slit common-slit" />
					<div className="white-mask"></div>
				</div>
			) : null}
			{progress > 0 && progress < 100 ? (
				<div className="split-area">
					<div className="bottom-left-red-slit common-slit" />
					<div className="bottom-right-yellow-slit common-slit" />
					<div className="white-mask"></div>
				</div>
			) : null}
			<div className="bottom-text">已筹</div>
		</div>
	)
}
